<html>
<head>
<title>tableComponent.vue</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.s0 { color: #f8e1aa; font-weight: bold;}
.s1 { color: #e79e3c; font-weight: bold;}
.s2 { color: #f8e1aa;}
.s3 { color: #e5c7c7; font-weight: bold;}
.s4 { color: #d6c248; font-weight: bold;}
.s5 { color: #ffffff;}
</style>
</head>
<body bgcolor="#313335">
<table CELLSPACING=0 CELLPADDING=5 COLS=1 WIDTH="100%" BGCOLOR="#606060" >
<tr><td><center>
<font face="Arial, Helvetica" color="#000000">
tableComponent.vue</font>
</center></td></tr></table>
<pre><span class="s0">&lt;</span><span class="s1">template</span><span class="s0">&gt;</span>
        <span class="s0">&lt;</span><span class="s1">el-table</span>
    <span class="s3">:data</span><span class="s4">=&quot;</span><span class="s1">this</span><span class="s4">.</span><span class="s2">tableData</span><span class="s4">&quot;</span>
    <span class="s3">max-height</span><span class="s4">=&quot;340&quot;</span>
    <span class="s3">border</span>
    <span class="s3">width</span><span class="s4">=&quot;100%&quot;</span>
    <span class="s3">@row-dblclick</span><span class="s4">=&quot;</span><span class="s2">myClick</span><span class="s4">&quot;</span>
    <span class="s3">ref</span><span class="s4">=&quot;tableStyle&quot;</span>
    <span class="s3">highlight-current-row</span>
    <span class="s3">@cell-click</span><span class="s4">=&quot;</span><span class="s2">cell_click</span><span class="s4">&quot;</span>
    <span class="s3">@selection-change</span><span class="s4">=&quot;</span><span class="s2">mySelect</span><span class="s4">&quot;</span>
    <span class="s3">:header-cell-style</span><span class="s4">=&quot;</span><span class="s0">{</span>
    <span class="s4">'background-color': 'rgb(64, 158, 255)',</span>
   <span class="s4">'color':'#fff',</span>
    <span class="s4">'border-bottom': '1px solid #fff',</span>
    <span class="s4">'text-align': 'center',</span>
    <span class="s4">'width':'100%',</span>
     <span class="s4">'border-right': '1px solid #fff'</span>
<span class="s0">}</span><span class="s4">&quot;</span>
    <span class="s3">:cell-style</span><span class="s4">=&quot;</span><span class="s0">{</span>
   <span class="s4">'height':'40px',</span>
  <span class="s4">'text-align': 'center',</span>
    <span class="s0">}</span><span class="s4">&quot;</span>
      <span class="s0">&gt;</span>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              <span class="s0">&lt;</span><span class="s1">el-table-column</span>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  <span class="s3">type</span><span class="s4">=&quot;selection&quot;</span>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    <span class="s3">align</span><span class="s4">=&quot;center&quot;</span><span class="s0">&gt;</span>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    <span class="s0">&lt;/</span><span class="s1">el-table-column</span><span class="s0">&gt;</span>
              <span class="s0">&lt;</span><span class="s1">sdzbjkgl35o8jvk</span><span class="s0">&gt;</span><span class="s2">Q</span><span class="s0">&lt;/</span><span class="s1">sdzbjkgl35o8jvk</span><span class="s0">&gt;</span>
              <span class="s2">:show-overflow-tooltip=&quot;true&quot;</span>
          <span class="s2">&gt;</span>
          <span class="s0">&lt;/</span><span class="s1">el-table-column</span><span class="s0">&gt;</span>
<span class="s0">&lt;/</span><span class="s1">el-table</span><span class="s0">&gt;</span>
<span class="s0">&lt;/</span><span class="s1">template</span><span class="s0">&gt;</span>

<span class="s0">&lt;</span><span class="s1">script</span><span class="s0">&gt;</span>
<span class="s1">export default </span><span class="s0">{</span>
    <span class="s2">name</span><span class="s4">: &quot;child&quot;,</span>
    <span class="s2">props</span><span class="s4">: </span><span class="s0">{</span>
     <span class="s2">tableData</span><span class="s4">:'',</span>
      <span class="s2">loading</span><span class="s4">:</span><span class="s1">true</span><span class="s4">,</span>
     <span class="s2">tableLabel</span><span class="s4">: </span><span class="s0">{</span>
         <span class="s2">type</span><span class="s4">: </span><span class="s2">Array</span><span class="s4">,</span>
         <span class="s1">default</span><span class="s4">: </span><span class="s0">() </span><span class="s4">=&gt; </span><span class="s0">{</span>
             <span class="s1">return </span><span class="s0">[]</span>
         <span class="s0">}</span>
     <span class="s0">}</span>
 <span class="s0">}</span><span class="s4">,</span>
  <span class="s2">computed</span><span class="s4">:</span><span class="s0">{</span>

  <span class="s0">}</span><span class="s4">,</span>
    <span class="s2">data</span><span class="s0">(){</span>
        <span class="s1">return </span><span class="s0">{</span>
            <span class="s2">changeInput</span><span class="s4">: </span><span class="s1">false</span><span class="s4">,</span>
            <span class="s2">selectionArr</span><span class="s4">: &quot;&quot;,</span>
            <span class="s2">multipleSelection</span><span class="s4">: </span><span class="s0">[]</span><span class="s4">,</span>
            <span class="s5">// tableHeight: 100</span>
            <span class="s2">options</span><span class="s4">: </span><span class="s0">[{</span>
                <span class="s2">value</span><span class="s4">: '01',</span>
                <span class="s2">label</span><span class="s4">: '1'</span>
                <span class="s0">}</span><span class="s4">, </span><span class="s0">{</span>
                <span class="s2">value</span><span class="s4">: '02',</span>
                <span class="s2">label</span><span class="s4">: '2'</span>
                <span class="s0">}</span><span class="s4">, </span><span class="s0">{</span>
                <span class="s2">value</span><span class="s4">: '03',</span>
                <span class="s2">label</span><span class="s4">: '3'</span>
                <span class="s0">}</span><span class="s4">, </span><span class="s0">{</span>
                <span class="s2">value</span><span class="s4">: '04',</span>
                <span class="s2">label</span><span class="s4">: '4'</span>
                <span class="s0">}</span><span class="s4">, </span><span class="s0">{</span>
                <span class="s2">value</span><span class="s4">: '05',</span>
                <span class="s2">label</span><span class="s4">: '5'</span>
            <span class="s0">}</span><span class="s4">,</span>
            <span class="s0">{</span>
                <span class="s2">value</span><span class="s4">: '06',</span>
                <span class="s2">label</span><span class="s4">: '6'</span>
                <span class="s0">}</span><span class="s4">, </span><span class="s0">{</span>
                <span class="s2">value</span><span class="s4">: '07',</span>
                <span class="s2">label</span><span class="s4">: '7'</span>
                <span class="s0">}</span><span class="s4">, </span><span class="s0">{</span>
                <span class="s2">value</span><span class="s4">: '08',</span>
                <span class="s2">label</span><span class="s4">: '8'</span>
                <span class="s0">}</span><span class="s4">, </span><span class="s0">{</span>
                <span class="s2">value</span><span class="s4">: '09',</span>
                <span class="s2">label</span><span class="s4">: '9'</span>
                <span class="s0">}</span><span class="s4">, </span><span class="s0">{</span>
                <span class="s2">value</span><span class="s4">: '10',</span>
                <span class="s2">label</span><span class="s4">: '10'</span>
            <span class="s0">}</span><span class="s4">,</span><span class="s0">{</span>
                <span class="s2">value</span><span class="s4">: '11',</span>
                <span class="s2">label</span><span class="s4">: '11'</span>
                <span class="s0">}</span><span class="s4">, </span><span class="s0">{</span>
                <span class="s2">value</span><span class="s4">: '12',</span>
                <span class="s2">label</span><span class="s4">: '12'</span>
            <span class="s0">}]</span><span class="s4">,</span>
            <span class="s2">value</span><span class="s4">: &quot;&quot;,</span>
          <span class="s2">row</span><span class="s4">:</span><span class="s0">{}</span>
        <span class="s0">}</span>
    <span class="s0">}</span><span class="s4">,</span>

    <span class="s2">methods</span><span class="s4">: </span><span class="s0">{</span>
      <span class="s2">filterTag</span><span class="s0">(</span><span class="s2">value</span><span class="s4">, </span><span class="s2">row</span><span class="s0">) {</span>
        <span class="s1">return </span><span class="s2">row</span><span class="s4">.</span><span class="s2">ITEMSOURCESCODE </span><span class="s4">=== </span><span class="s2">value</span><span class="s4">;</span>
      <span class="s0">}</span><span class="s4">,</span>
      <span class="s2">cell_click</span><span class="s0">(</span><span class="s2">row</span><span class="s0">){</span>
        <span class="s5">// console.log(row)</span>
        <span class="s5">// this.$refs.tableStyle.toggleRowSelection(row)</span>
        <span class="s1">this</span><span class="s4">.</span><span class="s2">$emit</span><span class="s0">(</span><span class="s4">&quot;getCellClick&quot;,</span><span class="s2">row</span><span class="s0">)</span>
      <span class="s0">}</span><span class="s4">,</span>
        <span class="s5">// aaa(currentRow, oldCurrentRow){</span>
        <span class="s5">//     console.log(currentRow,oldCurrentRow,&quot;aaaa&quot;)</span>
        <span class="s5">// },</span>
        <span class="s5">// 删除当行数据</span>
        <span class="s2">deleteRowData</span><span class="s0">(</span><span class="s2">row</span><span class="s4">, </span><span class="s2">index</span><span class="s0">){</span>
            <span class="s1">this</span><span class="s4">.</span><span class="s2">$emit</span><span class="s0">(</span><span class="s4">'deleteRowDataFun',</span><span class="s2">row</span><span class="s4">, </span><span class="s2">index</span><span class="s0">)</span><span class="s4">;</span>
        <span class="s0">}</span><span class="s4">,</span>
        <span class="s5">// 新增一行</span>
        <span class="s2">addRowData</span><span class="s0">(</span><span class="s2">row</span><span class="s4">, </span><span class="s2">index</span><span class="s0">){</span>
            <span class="s1">this</span><span class="s4">.</span><span class="s2">$emit</span><span class="s0">(</span><span class="s4">'addRowDataFun',</span><span class="s2">row</span><span class="s4">, </span><span class="s2">index</span><span class="s0">)</span><span class="s4">;</span>
        <span class="s0">}</span><span class="s4">,</span>
        <span class="s5">// 复制当行数据</span>
        <span class="s2">copyRowData</span><span class="s0">(</span><span class="s2">row</span><span class="s4">, </span><span class="s2">index</span><span class="s0">){</span>
            <span class="s1">this</span><span class="s4">.</span><span class="s2">$emit</span><span class="s0">(</span><span class="s4">'copyRowDataFun',</span><span class="s2">row</span><span class="s4">, </span><span class="s2">index</span><span class="s0">)</span><span class="s4">;</span>
        <span class="s0">}</span><span class="s4">,</span>
        <span class="s5">// 选择行触发事件</span>
        <span class="s2">mySelect</span><span class="s0">(</span><span class="s2">val</span><span class="s0">){</span>
            <span class="s1">this</span><span class="s4">.</span><span class="s2">multipleSelection </span><span class="s4">= </span><span class="s2">val</span><span class="s4">;</span>
            <span class="s1">this</span><span class="s4">.</span><span class="s2">$emit</span><span class="s0">(</span><span class="s4">'selectFunction', </span><span class="s2">val</span><span class="s0">)</span>
        <span class="s0">}</span><span class="s4">,</span>
        <span class="s5">// 双击行触发事件</span>
        <span class="s2">myClick</span><span class="s0">(</span><span class="s2">row</span><span class="s0">){</span>
            <span class="s1">this</span><span class="s4">.</span><span class="s2">selectionArr </span><span class="s4">= </span><span class="s2">row</span><span class="s4">;</span>
            <span class="s5">// this.$emit('function');</span>
        <span class="s0">}</span><span class="s4">,</span>
    <span class="s0">}</span><span class="s4">,</span>
    <span class="s2">created </span><span class="s0">(){</span>
        <span class="s5">// console.log()</span>
    <span class="s0">}</span><span class="s4">,</span>
  <span class="s2">mounted</span><span class="s0">(){</span>
  <span class="s0">}</span>
<span class="s0">}</span>
<span class="s0">&lt;/</span><span class="s1">script</span><span class="s0">&gt;</span>
<span class="s0">&lt;</span><span class="s1">style</span><span class="s0">&gt;</span>
  <span class="s4">.</span><span class="s1">el-table th</span><span class="s4">&gt;.</span><span class="s1">cell</span><span class="s4">.</span><span class="s1">highlight</span><span class="s0">{</span>
    <span class="s3">color</span><span class="s2">: </span><span class="s4">unset </span><span class="s1">!important</span><span class="s4">;</span>
  <span class="s0">}</span>
  <span class="s4">.</span><span class="s1">el-table__column-filter-trigger i</span><span class="s0">{</span>
    <span class="s3">color</span><span class="s2">:</span><span class="s4">white;</span>
  <span class="s0">}</span>
  <span class="s4">.</span><span class="s1">el-table__header</span><span class="s0">{</span>
    <span class="s3">width</span><span class="s2">: </span><span class="s4">100% </span><span class="s1">!important</span><span class="s4">;</span>
  <span class="s0">}</span>
<span class="s0">&lt;/</span><span class="s1">style</span><span class="s0">&gt;</span>
</pre>
</body>
</html>